<!-- 常见问题 -->
<template>
	<div>
		<!-- 选项卡 -->
		<tabs
			class="bgwhite"
			:formData="tabs"
			default=""
			@changeTab="changeTab"
			style="padding:0 0 5px 52px">
		</tabs>
		<!-- 过滤条件 -->
		<div class="filter flex flex-between flex-y">
			<div class="flex">
				<search
				 	style="width:200px;"
					class="right20"
					tip="请输入关键字"
					@searchOK="searchOK">
				</search>
			</div>
			<div class="flex">
				<el-button type="primary" size="small">新增</el-button>
				<el-button size="small">导入</el-button>
				<el-button size="small">导出</el-button>
				<el-button size="small">批量删除</el-button>
			</div>

		</div>
		<!-- 表格 -->
		<div class="main">
			<el-table
				v-loading="loading"
				:data="formData"
				style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				<el-table-column
					type="index"
					label="序号"
					width="140">
				</el-table-column>
				<el-table-column
					prop="question"
					label="问题">
				</el-table-column>
				<el-table-column
					label="操作">
					<template slot-scope="scope">
						<el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import tabs from '@/components/public/tabs/tabs'
import search from '@/components/public/search/search'
export default {
	components:{
		tabs,
		search
	},
	data () {
		return {
			//选项卡
			tabs:[
				{
					value:"",
					label:"砂锅号"
				},
				{
					value:"1",
					label:"砂锅问答"
				}
			],
			//过滤条件
			search:"",

			//表格
			loading:false,
			formData:[
				{
					id:1
				},
				{
					id:2
				},
				{
					id:3
				},
			]
		}
	},
	methods:{
		//切换选项卡
		changeTab:function(val){
			console.log(val);
		},
		//搜索
		searchOK:function(val){
			this.search = val;
		},
		//表格选中
		handleSelectionChange:function(e){
			console.log(e);
		},
		//删除
		del:function(id){
			console.log(id)
			this.$confirm(`确定要删除该问题吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.common.msg('删除成功');
			})
		},
	},
	mounted(){

	}
}
</script>

<style lang="scss" scoped>
	.filter{
		padding: 15px 30px;
		background-color: #fff;
	}
	.main{
		background-color: #fff;
		margin-top: 10px;
		padding: 30px 50px;
	}
</style>
